<form #userSelectionForm="ngForm" novalidate (ngSubmit)="save()">
    <div class="modal-header">
        <h4 class="modal-title" [innerHtml]="title">
            
        </h4>
        <span class="pull-right" >
            <div class="add-name" style="display: flex; align-items: center;">
                <label for="NodeName" style="margin-bottom: 0; margin-right:1rem;">环节名称:</label>
                <div class="form-group form-md-line-input form-md-floating-label no-hint mr-3">
                    <select id="NodeName" class="form-control edited" name="NodeName" [(ngModel)]="selection.selectNodeId" (change)="changeNode()">
                        <option value="">请选择</option>
                        <option *ngFor="let node of nodeList" [value]="node.value">{{node.name}}</option>
                    </select>
                </div>
            </div>
            <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                <i aria-hidden="true" class="bi bi-x"></i>
            </button>
        </span>

    </div>
    <div class="modal-body" [busyIf]="loading">
        <div class="row">
            <div class="col-sm-9 col-rybox">
                <div class="row">
                    <div class="col-sm-12">
                        <h3 class="lvtit">人员选择</h3>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <select id="UnitSelection" class="form-control edited" (change)="changeUnit()" 
                               [(ngModel)]="selectUnitId" size="4" style="height:300px;" name="UnitSelection">
                                <option value="">全部</option>
                                <option *ngFor="let unit of unitList" value="{{unit.id}}">{{unit.displayName}}</option>
                            </select>
                            <!-- <label for="UnitSelection">请选择部门：<span>(请双击待选择人员中您要选择的用户，如需取消，请双击已选择人员框中的用户！)</span></label> -->
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <select id="UnSelectedMan" class="form-control edited" size="4" style="height:300px;" name="UnSelectedMan">
                                <option *ngFor="let user of userList" value="{{user.id}}" (click)="selectUsers(user);">{{user.name}}</option>
                            </select>
                            <!-- <label for="UnSelectedMan">待选择人员</label> -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3 col-hjbl">
                <div class="row">
                    <div class="col-sm-12">
                        <h3 class="lvtit">环节办理人</h3>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <select id="NodeDealMan" class="form-control edited" size="4" style="height:300px;" name="NodeDealMan">
                                <option *ngFor="let selectUser of selectionUserList" value="{{selectUser.id}}" (click)="removeSelectUsers(selectUser)">{{selectUser.name}}</option>
                            </select>
                            <!-- <label for="NodeDealMan">环节办理人</label> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <label for="ActionScheme">审批/办理方式:</label>
        <div class="form-group form-md-line-input form-md-floating-label no-hint  mr-3">
            <select id="ActionScheme" name="ActionScheme"
                    class="form-control edited" 
                    [(ngModel)]="selection.selectActionScheme" >
                    <option *ngFor="let op of actionSchemeList" [value]="op.value">{{op.name}}</option>
            </select>
        </div>
        <div class="fr text-right">
            <button [disabled]="saving" type="button" class="btn btn-light-primary font-weight-bold" (click)="close()">
                {{"Cancel" | localize}}
            </button>
            <button type="submit" class="btn btn-primary blue" [disabled]="!userSelectionForm.form.valid || saving"
                [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
            </button>
        </div>
    </div>
</form>
